<template>
  <el-select v-model="dataValue"
             :filterable="attrs.filterable"
             :clearable="attrs.clearable"
             :multiple="attrs.multiple"
             :collapse-tags="attrs.collapseTags"
             :allow-create="attrs.allowCreate"
             :default-first-option="attrs.defaultFirstOption"
             :disabled="disabled"
             @change="valueChange"
             @click.native="click"
             @blur="blur"
             style="width: 100%;"
             :placeholder="attrs.placeholder ? attrs.placeholder : `请选择${label}`">
    <el-option
      v-for="(item, index) in option"
      :key="index"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
      <component :is="attrs.template" :item="item" :index="index" />
    </el-option>
  </el-select>
</template>
<script type="text/javascript">
import XMixIn from './XMixIn'
export default {
  mixins: [XMixIn],
  data () {
    return {
      option: []
    }
  },
  props: {
    options: {
      type: [Array],
      default: Array
    }
  },
  watch: {
    options: {
      handler (options) {
        if (options.length > 0 && typeof options[0] === 'string') {
          this.option = options.map(item => ({ label: item, value: item }))
        } else {
          this.option = options
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
